<template>
  <el-select
    :placeholder="$t('validate.pleaseChoose')"
    v-model="value"
    filterable
    style="width: 100%"
  >
    <el-option
      v-for="{ username, cname, userId } of options"
      :key="userId"
      :label="`${username}(${cname || '-'})`"
      :value="username"
    />
  </el-select>
</template>

<script>
import { useRequest } from "vue-request";
import { getUsers } from "@/api/user";
import { get } from "lodash";
import { ref, watch } from "vue";

const formatResult = (data) => {
  return get(data, "data.data.records", []);
};

export default {
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const { data, loading } = useRequest(getUsers, {
      formatResult,
    });
    const value = ref(null);
    watch(value, () => {
      emit("update:modelValue", value);
    });
    return {
      options: data,
      loading,
      value,
    };
  },
};
</script>

<style>
</style>
